<!--
* Created by Sean on 2017/9/30.
* Forget Password
-->
<template>
  <div id="findPwd" class="find-pwd">
    <group class="find-pwd-container">
      <x-input :show-clear="false"placeholder="请输入手机号" mask="99999999999" v-model="mobile" ref="mobile" type="tel" is-type="china-mobile" :max="11" :should-toast-error="false">
        <img slot="label" src="../../images/icon_user_blue.png">
      </x-input>
      <x-input :show-clear="false"placeholder="请输入验证码" class="weui-vcode" v-model="validCode" keyboard="number" :max="6" style="padding: .65rem .75rem;">
        <img slot="label" src="../../images/icon_valid_blue.png">
        <x-button slot="right" type="primary" :disabled="true" mini v-if="timerShow">已发送(<countdown v-model="timeCount" :start="timerStart" @on-finish="timerFinish"></countdown>)</x-button>
        <x-button slot="right" type="primary" mini @click.native="getValidCode" v-else>获取验证码</x-button>
      </x-input>
      <x-input :show-clear="false"placeholder="请输入新密码" class="vux-1px-b" type="password" v-model="password" ref="password" :is-type="isPassword" :should-toast-error="false">
        <img slot="label" src="../../images/icon_lock_blue.png">
      </x-input>
      <div class="btn-wrapper"><x-button type="primary" @click.native="resetPwd">确定</x-button></div>
    </group>
  </div>
</template>
<script>
  export default {
    name: 'FindPwd',
    data () {
      return {
        timeCount: 0,
        timerShow: false,
        timerStart: false,
        mobile: '',
        validCode: '',
        password: '',
        isPassword: function (value) {
          return {
            valid: /^\w{6,30}$/g.test(value),
            msg: '密码为数字、字母的组合，不得少于 6 位'
          }
        }
      }
    },
    methods: {
      // 获取验证码
      getValidCode () {
        if (this.checkMobile()) {
          this.$axiosPosting(this.$api.sendValidCode, {
            mobile: this.mobile
          }).then(json => {
            let message = ''
            if (json.code === '0000') {
              this.timeCount = 60
              this.timerShow = true
              this.timerStart = true
              message = '验证码已发送'
            } else {
              message = json.msg
            }
            this.$vux.toast.text(message, 'middle')
          })
        }
      },
      // 校验手机号
      checkMobile () {
        if (this.mobile.trim() === '') {
          this.$vux.toast.text('请输入手机号', 'middle')
          return false
        }
        if (this.$refs.mobile.valid === false) {
          this.$vux.toast.text('手机号格式不正确', 'middle')
          return false
        }
        return true
      },
      // 校验验证码
      checkValidCode () {
        if (this.validCode.trim() === '') {
          this.$vux.toast.text('请输入验证码', 'middle')
          return false
        }
        return true
      },
      // 校验密码
      checkPassword () {
        if (this.password.trim() === '') {
          this.$vux.toast.text('请输入密码', 'middle')
          return false
        }
        if (this.$refs.password.valid === false) {
          this.$vux.toast.text('密码为数字、字母的组合，不得少于 6 位', 'middle')
          return false
        }
        return true
      },
      // 倒计时结束
      timerFinish () {
        this.timerStart = false
        this.timerShow = false
      },
      resetPwd () {
        if (this.checkMobile() &&
          this.checkValidCode() &&
          this.checkPassword()) {
          this.$axiosPosting(this.$api.updatePwd, {
            mobile: this.mobile,
            validateCode: this.validCode,
            newPwd: this.password,
            loginToken: localStorage.getItem('token') || ''
          }).then(json => {
            if (json.code === '0000') {
              this.$router.replace('/login')
            } else {
              this.$vux.toast.text(json.msg, 'middle')
            }
          })
        }
      }
    }
  }
</script>
<style lang="less">
  html {
    background: #FFF;
  }
  .find-pwd {
    .weui-cells {
      margin-top: 0;
      /*padding-top: 1rem;*/
    }
    .vux-x-input {
      padding: .8rem .75rem;
    }
    .btn-wrapper {
      margin-top: 1rem;
      padding: 0 .75rem;
    }
    .weui-btn_mini {
      min-width: 5rem;
      font-size: .7rem !important;
      line-height: 2.18 !important;
    }
  }
</style>
